<template>
	<u-popup :show="visible" bgColor="transparent" mode="center">
		<view class="container-modal">
			<view class="box-reminder">
				<image class="img-reminder" src="/static/remind@3x.png"></image>
			</view>
			<view class="tip-reminder">您的免费次数已用完，请联系客服，<view>为您办理充值。</view>
			</view>
			<view class="box-wechat">
				<view class="wrap-wechat">
					<image class="icon-wechat" src="/static/wechat_green@3x.png"></image>
					<text>{{no_wechat}}</text>
				</view>
				<view class="box-copy" @tap="onCopy">复制</view>
			</view>
			<view class="box-iknow" @tap="onCancel">我知道了</view>
		</view>
	</u-popup>
</template>

<script setup>
	import {
		ref,
		computed
	} from "vue"
	import {
		showToast
	} from "@/utils/frameApi";
	const props = defineProps({
		title: {
			type: String,
			default: ''
		},
		content: {
			type: String,
			default: ''
		},
		showCancelButton: {
			type: Boolean,
			default: false
		},
		cancelText: {
			type: String,
			default: '取消'
		},
		cancelColor: {
			type: String,
			default: 'rgba(255,255,255,0.7)'
		},

		confirmText: {
			type: String,
			default: '确认'
		},
		confirmColor: {
			type: String,
			default: 'rgba(72, 194, 130, 1)'
		},
		showConfirmButton: {
			type: Boolean,
			default: true,
		},
		visible: {
			type: Boolean,
			default: false
		},
	})
	const emits = defineEmits(['update:visible', 'clickCallback'])
	const showFooter = computed(() => {
		if (props.showCancelButton || props.showConfirmButton) {
			return true
		}
		return false
	})
	const onCancel = () => {
		emits('update:visible', false)
		emits('clickCallback', false)
	}
	const onConfirm = () => {
		emits('update:visible', false)
		emits('clickCallback', true)
	}
	let no_wechat = ref("26762685")
	const onCopy = (item) => {

		uni.setClipboardData({
			data: no_wechat,
			showToast: false,
			success: function() {
				// console.log('success');
				showToast({
					title: '复制成功'
				})
				emits('update:visible', false)
			}
		});

	}
</script>

<style lang="less" scoped>
	.container-modal {
		position: relative;
		width: 620rpx;
		background: #213343;
		border-radius: 40rpx;
		padding: 32rpx 32rpx 55rpx;
		box-sizing: border-box;

		.box-reminder {
			position: relative;
			width: 100%;
			display: flex;
			display: -webkit-flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;

			.img-reminder {
				position: relative;
				width: 112rpx;
				height: 112rpx;
				vertical-align: top;
			}
		}

		.tip-reminder {
			position: relative;
			width: 500rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 48rpx;
			margin: 38rpx auto;
			text-align: center;
		}

		.box-wechat {
			position: relative;
			width: 538rpx;
			height: 88rpx;
			background: #2D4052;
			border-radius: 24rpx;
			padding-left: 32rpx;
			padding-right: 32rpx;
			box-sizing: border-box;
			display: flex;
			display: -webkit-flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			margin: 0 auto;

			.wrap-wechat {
				position: relative;
				display: flex;
				display: -webkit-flex;
				flex-direction: row;
				align-items: center;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 600;
				color: #FFFFFF;
				line-height: 30rpx;

				.icon-wechat {
					position: relative;
					width: 50rpx;
					height: 50rpx;
					vertical-align: top;
					margin-right: 24rpx;
				}
			}

			.box-copy {
				position: relative;
				width: 72rpx;
				height: 48rpx;
				border: 1px solid #00FFF6;
				border-radius: 10rpx;
				text-align: center;
				line-height: 48rpx;
				box-sizing: border-box;
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 600;
				color: #00FFF6;
			}
		}

		.box-iknow {
			position: relative;
			width: 278rpx;
			height: 72rpx;
			background: #48C282;
			// box-shadow: 0px 6rpx 16rpx 0px rgba(147, 176, 165, 0.16);
			background: linear-gradient(180deg, #00FFF6 0%, #28C0FF 100%);
			border-radius: 16rpx;
			line-height: 72rpx;
			text-align: center;
			box-sizing: border-box;
			margin: 55rpx auto 0;

			font-size: 28rpx;
			font-family: 'Source Han Sans CN', 'PingFang SC';
			font-weight: bold;
			// color: #FFFFFF;
			color: #182836;
		}
	}
</style>